<template>
	<view class="container">
		<view class="top-layout">
			<image class="top-image"></image>
			<view class="top-info" @click="showDrawerView">
				<image class="user-icon" :src="getUserIcon?getUserIcon:avatarUrl"></image>
				<view v-if="hasUserInfo" class="user-name">{{getNickName}}</view>
        <button v-else class="get-user-info" size="mini" @click="$tools.pageGo(webLogin)">登陆</button>
      </view>
			<!-- 分享按钮 -->
			<view class="top-share" @click="shareClick">
				<!-- #ifdef MP-ALIPAY -->
				<icon class="fa fa-lg fa-share-square-o" style="color: white;"></icon>
				<!-- #endif -->
				<!-- #ifndef MP-ALIPAY -->
				<button open-type="share" class="share-btn">
					<icon class="fa fa-lg fa-share-square-o" style="color: white;"></icon>
				</button>
				<!-- #endif -->
			</view>
		</view>
		<!-- 右侧抽屉 -->
		<uni-drawer ref="infoDrawer" :width="300" mode="right">
			<view class="drawer-content" :style="{backgroundImage:'url('+bgImg+')'}">
				<view class="ver-layout-center" style="padding: 20px;padding-top: 70px;">
					<view style="position: relative;">
						<image class="content-user-icon" style="margin-bottom: 30px;" @click="preUserIconClick" :src="getUserIcon?getUserIcon:avatarUrl">
						</image>
						<i class="edit-user-icon fa fa-edit" v-if="canEditUser" @click="onUserIconClick"></i>
					</view>
					<!-- 功能列表 -->
					<block v-for="(item,index) in userInfos" :key="index">
						<view class="user-info-item single-line-text hor-layout-side-center" @click="editUserInfo(item)">
              <text class="info-label">{{item.key}}：</text>
              <text class="info-value">{{item.value}}</text>
						</view>
					</block>
					<navigator :url="getPwdUrl" class="user-info-item user-setting" :style="getPwdStyle">{{getPwdAction}}</navigator>
					<view class="hor-layout-center-all refuse-mode" v-if="!canEditUser">
						<view class="refuse-bg"></view>
						<view style="z-index: 1000;">不支持账号统一</view>
					</view>
					<button v-if="hasUserInfo" type="warn" class="login-out" @click="loginOut">退出登陆</button>
				</view>
				<image class="drawer-bottom-image"></image>
			</view>
		</uni-drawer>

		<!-- 功能列表 -->
		<view style="margin-top: 40rpx">
			<block v-for="(item,index) in myList" :key="index">
				<view class="my-item hor-layout-center" @click="onItemClick(item)">
					<i class="my-item_icon fa fa-lg" :class="item.icon"></i>
					<view class="my-item-title">{{item.title}}</view>
					<i class="my-item_right fa fa-lg  fa-angle-right"></i>
				</view>
			</block>
		</view>
		<view style="height: 50px;"></view>
		<!-- 分享弹窗 -->
		<uni-popup ref="popup" type="share">
			<uni-popup-share title="分享到" @select="shareSelectListener"></uni-popup-share>
		</uni-popup>
	</view>
</template>

<script>
	import {
		home,
		aboutme,
		webView,
		webLogin,
		userEdit,
		userPwd,
		visitors,
    mapInfo,
		mpUser,
		yzmEdit
	} from '@/router.js'
	import {
		updateVistorInfo
	} from "@/common/paltform.js"
	import userUtils from "@/common/user-utils.js"
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
	export default {
		components: {
			uniPopupShare
		},
		data() {
			return {
				webLogin,
				userPwd,
				showDrawer: false,
				hasUserInfo: false,
				bgImg: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/498e0f9e-32a3-4bf6-8d2a-619febfab293.jpg',
				avatarUrl: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/e6081c4c-e750-4394-8d88-6477d5d6b615.jpg',
				userInfo: {
					nickName: '',
					email: ''
				},
				userInfos: [{
					key: '昵称',
					value: ''
				}],
				myList: [{
						title: '关于小程序',
						icon: 'fa-info-circle',
						url: aboutme
					}, {
						title: '访客记录',
						icon: 'fa-paw',
						url: visitors
					}
					// #ifndef MP-ALIPAY
					, {
						title: '个人网址',
						icon: 'fa-chain',
						weburl: 'https://zhaoyj.work'
					}, {
						title: 'Github地址',
						icon: 'fa-github',
						weburl: 'https://github.com/yueyue10'
					}, {
						title: '联系作者',
						icon: 'fa-commenting',
						msg: '1650432983@qq.com'
					}, {
						title: '地图数据',
						icon: 'fa-map',
						url:mapInfo
					}
					// #endif
				]
			}
		},
		computed: {
			getNickName() {
				let userInfo = this.userInfo
				if (userInfo.nickName)
					return userInfo.nickName
				if (userInfo.email)
					return this.stringFilter(userInfo.email, 4)
				if (userInfo.mobile)
					return this.stringFilter(userInfo.mobile, 3)
				if (userInfo.wxUserInfo && userInfo.wxUserInfo.nickName)
					return userInfo.wxUserInfo.nickName
				if (userInfo.aliUserInfo && userInfo.aliUserInfo.nickName)
					return userInfo.aliUserInfo.nickName
			},
			getUserIcon() {
				if (this.userInfo.avatar)
					return this.userInfo.avatar
				if (this.userInfo.avatarUrl)
					return this.userInfo.avatarUrl
				if (this.userInfo.wxUserInfo && this.userInfo.wxUserInfo.avatarUrl)
					return this.userInfo.wxUserInfo.avatarUrl
				if (this.userInfo.aliUserInfo && this.userInfo.aliUserInfo.avatar)
					return this.userInfo.aliUserInfo.avatar
				return null
			},
			getPwdAction() {
				return this.getPwdActionName()
			},
			getPwdStyle() {
				let userInfo = this.userInfo
				if (userInfo.password)
					return "background: #E64340;"
				return "background: #ac9a9c;"
			},
			getPwdUrl() {
				let action = this.getPwdActionName()
				return this.userPwd + `?action=${action}`
			},
			canDrawerUse() {
				if (this.hasUserInfo)
					return true
				return false
			},
			canEditUser() {
				let flag = this.userInfo.flag
				console.log("canEditUser", flag)
				if (flag && flag == 'tt')
					return false
				return true
			}
		},
		onLoad() {
			if (this.$wechat && this.$wechat.isWechat())
				this.$wechat.share()
		},
		onShow() {
			this.updateUserInfo()
		},
		onShareAppMessage() {
			let title = "推荐给你一个应用"
			let desc = "我发现一个很好的应用，推荐给你看看。"
			return {
				title,
				content: desc,
				path: home
			}
		},
		onShareTimeline() {},
		methods: {
      showDrawerView(){
        if(!this.canDrawerUse)return
        this.showDrawer=true
        this.$refs.infoDrawer.open()
      },
			// 获取密码操作名称
			getPwdActionName() {
				if (this.userInfo.password)
					return "修改密码"
				return "设置密码"
			},
			// 更新用户信息
			updateUserInfo() {
				// debugger
				let userInfo = uni.getStorageSync("userInfo")
				console.log("updateUserInfo===========", userInfo)
				let hasUserInfo = userInfo && JSON.stringify(userInfo) != "{}"
				this.hasUserInfo = hasUserInfo
				this.userInfo = hasUserInfo ? userInfo : {}
				this.getUserInfos(this.userInfo)
			},
			// 获取用户信息
			getUserInfos(userInfo) {
				console.log("getUserInfos======", userInfo)
				// debugger
				let userKeys = {
					nickName: "昵称",
					mobile: "手机号",
					email: "邮箱"
				}
				let userInfos = []
				for (let [key, value] of Object.entries(userKeys)) {
					console.log(key + ':' + value);
					userInfos.push({
						tag: key,
						key: value,
						value: userInfo[key]
					})
				}
				if (userInfo.wxUserInfo)
					userInfos.push({
						key: '微信小程序',
						tag: '微信小程序',
						value: userInfo.wxUserInfo.nickName
					})
				if (userInfo.aliUserInfo)
					userInfos.push({
						key: '支付宝小程序',
						tag: '支付宝小程序',
						value: userInfo.aliUserInfo.nickName
					})
				this.userInfos = userInfos
			},
			stringFilter(string, flag = 4) {
				// string = "18810126510"
				if (!string)
					return ""
				let str1 = string.substr(0, flag)
				let str3 = string.substr(flag + 4)
				return str1 + "****" + str3
			},
			// item点击监听
			onItemClick(item) {
				console.log(item)
				let weburl = item.weburl ? `${webView}?url=${item.weburl}&title=${item.title}` : ''
				let mUrl = item.url
				// #ifndef MP
				mUrl = item.url || weburl
				// #endif
				if (mUrl) { //如果有url就跳转
					navito(mUrl)
					return
				}
				let text = item.weburl || item.msg
				if (text) { //如果有内容就复制
					uni.setClipboardData({
						data: text
					}).then(res => {
						console.log("setClipboardData-success")
						toast("复制成功")
					})
					return
				}
				toast("开发中...")
			},
			// 分享按钮点击监听
			shareClick() {
				// #ifdef MP
				uni.showShareMenu({})
				// #endif
				// #ifndef MP
				if (this.$wechat && this.$wechat.isWechat()) {
					uni.showModal({
						content: "点击右上角...按钮进行分享"
					})
				} else {
					this.$refs.popup.open()
				}
				// #endif
			},
			// 分享弹窗监听
			shareSelectListener(e) {
				console.log(e)
				let shareScene = ["WXSceneSession", "WXSenceTimeline", "WXSceneFavorite"]
				let scene = shareScene[e.index]
				this.shareProcess(scene)
				this.$refs.popup.close()
			},
			// 分享逻辑
			shareProcess(scene) {
				let url = "http://m3w.cn/__uni__9ac5bb8"
				let title = "推荐给你一个应用"
				let desc = "我发现一个很好的应用，推荐给你看看。"
				let imgurl = "https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__9AC5BB8.png"
				// #ifdef APP-PLUS
				uni.share({
					provider: "weixin",
					scene: scene,
					type: 0,
					href: url,
					title: title,
					summary: desc,
					imageUrl: imgurl
				}).then(res => {
					console.log(JSON.stringify(res));
				}).catch(err => {
					toast("分享失败")
				})
				// #endif
			},
			//退出
			loginOut() {
				uni.removeStorageSync("uid")
				uni.removeStorageSync("token")
				uni.removeStorageSync("userInfo")
				setTimeout(() => {
					toast("退出成功!")
					this.showDrawer = false
          this.$refs.infoDrawer.close()
					this.updateUserInfo()
				}, 300);
			},
			// 头像预览
			preUserIconClick() {
				let avatar = ""
				if (this.userInfo.avatar)
					avatar = this.userInfo.avatar
				if (this.userInfo.avatarUrl)
					avatar = this.userInfo.avatarUrl
				if (!avatar) return
				uni.previewImage({
					urls: [avatar]
				})
			},
			// 修改头像
			onUserIconClick() {
				userUtils.setUserAvatar(() => {
					this.updateUserInfo()
				})
			},
			editUserInfo(item) {
				let userObj = JSON.stringify(item)
				let eidtUrl = `${userEdit}?userObj=${userObj}`
				let yzmEidtUrl = `${yzmEdit}?userObj=${userObj}`
				let mpUserUrl = `${mpUser}?userObj=${userObj}`
				let pageUrl = null
				if (item.tag === "微信小程序" || item.tag === "支付宝小程序") {
					pageUrl = mpUserUrl
				} else if (item.key === "邮箱" || item.key === "手机号") {
					pageUrl = yzmEidtUrl
				} else {
					pageUrl = eidtUrl
				}
				navito(pageUrl)
			}
		}
	}

	function toast(content) {
		uni.showToast({
			title: content,
			icon: "none",
		});
	}

	function navito(pageurl) {
		uni.navigateTo({
			url: pageurl
		})
	}
</script>

<style>
	page {
		background: #F4F4FA;
	}

	.container {
		width: 100%;
		/* height: 100vh; */
		background: #F4F4FA;
	}

	.top-layout {
		/* background-color: #2277f0; */
		background: linear-gradient(#2277f0, #5898f4);
		/* #ifdef MP-ALIPAY */
		height: 220px;
		/* #endif */
		/* #ifndef MP-ALIPAY */
		height: 260px;
		/* #endif */
		position: relative;
		display: flex;
		flex-direction: row;
	}

	.top-image {
		bottom: 0px;
		width: 100%;
		height: 100px;
		position: absolute;
		background-image: url('');
	}

	.top-info {
		position: relative;
		margin: auto;
		/* #ifdef MP-ALIPAY */
		margin-top: 65px;
		/* #endif */
		/* #ifndef MP-ALIPAY */
		margin-top: 95px;
		/* #endif */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.top-share {
		/* #ifdef MP-ALIPAY */
		width: 20px;
		/* #endif */
		/* #ifndef MP-ALIPAY */
		width: auto;
		/* #endif */
		position: absolute;
		bottom: 20px;
		right: 20px;
		border-radius: 3px;
		padding: 1px 3px;
		background: linear-gradient(to bottom right, #50e3c2, #f9ca7b)
	}

	.share-btn {
		/*
		box-sizing: 1;*/
		padding-left: 0px;
		padding-right: 0px;
		line-height: 1.5em;
		background-color: transparent;
	}

	.user-icon {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.user-name {
		color: white;
		font-size: 13px;
		margin-top: 10px;
	}

	.get-user-info {
		/*font-size: 13px;*/
		/*padding: 3px 8px;*/
		/* #ifndef MP-ALIPAY */
		/*line-height: 1rem;*/
		/* #endif */
		margin-top: 10px;
	}

	.my-item {
		position: relative;
		background: white;
		height: 88rpx;
		margin-top: 27rpx;
	}

	.my-item_icon {
		color: #A0C3F8;
		font-size: 47rpx;
		line-height: 47rpx;
		margin-left: 40rpx;
	}

	.my-item-title {
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.my-item_right {
		height: 60rpx;
		font-size: 60rpx;
		line-height: 60rpx;
		position: absolute;
		right: 40rpx;
		color: #CBCBCB;
	}

	.drawer-content {
		width: 100%;
		height: 100vh;
		background-size: contain;
		background-position: bottom;
		background-repeat: no-repeat;
		background-color: #62AEEC;
	}

	.drawer-bottom-image {
		position: absolute;
		bottom: 0px;
		width: 100%;
		height: 100px;
		background-image: url('');
	}

	.content-user-icon {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.edit-user-icon {
		color: white;
		position: absolute;
		right: -25px;
		top: 0px;
	}

	.user-info-item {
		width: 100%;
		font-size: small;
		background: #6e769b;
		color: white;
		padding: 5px 6px;
		margin: 5px 0px;
		border-radius: 4px;
	}

  .info-label{
    font-size: 12px;
    color: lightgrey;
  }

  .info-value{
    font-size: 13px;
    color: #0b12fb;
  }

	.refuse-mode {
		position: absolute;
		width: 100%;
		height: 200px;
		top: 130px;
	}

	.refuse-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #9b9b9b;
		opacity: 0.5;
	}

	.user-setting {
		/* width: fit-content; */
		text-align: center;
		background: #ac9a9c;
		padding: 3px 5px;
		font-size: smaller;
		margin-top: 8px;
	}

	.login-out {
		font-size: small;
		margin-top: 70px;
	}
</style>
